{%- import 'apostrophe-ui:components/buttons.html' as buttons -%}
{% for item in data.choices %}
  {# If the join has relationship properties, we need to go one more step to #}
  {# get to the item itself. The relationship properties are in #}
  {# item.relationship. -Tom #}
  {% set choice = item.item or item %}
  {% set relationship = item.relationship %}
  <div class="apos-chooser-choice{{ ' apos-chooser-choice--removed' if item.__removed }}" data-chooser-choice='{{ choice._id }}' >
    {% if not item.readOnly %}
      <div class="apos-button apos-button--in-context apos-button--group apos-button--inline apos-chooser-controls">
        {# By default you can change the order, #}
        {# sometimes this has no meaningful effect #}
        {%- if not apos.utils.isFalse(data.field.sortable) -%}
          {{ buttons.inGroup('', { icon: 'arrows', action: 'sort-item', tooltip: 'Sort', value: choice._id}) }}
          {{ buttons.inGroup('', { icon: 'arrow-up', action: 'raise-item', tooltip: 'Move Up', value: choice._id}) }}
          {{ buttons.inGroup('', { icon: 'arrow-down', action: 'lower-item', tooltip: 'Move Down', value: choice._id }) }}
        {%- endif -%}
        {%- if data.relationship and (apos.utils.filterEmpty(data.relationship, 'inline').length) -%}
          {{ buttons.inGroup('', { icon: 'list', action: 'relate-item' , value: choice._id, tooltip: 'Related Fields'}) }}
        {%- endif -%}
        {# By default you can edit the items themselves, sometimes #}
        {# this is confusing. Pages can never be edited here because #}
        {# Apostrophe is not designed to edit pages without breaking #}
        {# out of the chooser #}
        {%- if not apos.utils.isFalse(data.field.editDocs) -%}
          {%- set _item = item.item or item -%}
          {%- if (not apos.utils.isFalse(data.field.editDocs)) and _item._edit and (not apos.pages.isPage(_item)) %}
            {{ buttons.inGroup('', { icon: 'pencil', action: 'edit-item', tooltip: 'Edit', value: choice._id}) }}
          {%- endif -%}
        {%- endif -%}
        {{ buttons.inGroup('', { icon: 'trash', action: 'delete-item', value: choice._id, tooltip: 'Remove'}) }}
      </div>
    {% endif %}
    <div class="apos-choose-choice-content">
      {% include data.choiceTemplate %}
    </div>
  </div>
{% endfor %}
